<script setup name="Person" lang="ts">
import {watch, ref, watchEffect} from "vue";

let temp = ref(10);
let height = ref(0);

function changeTemp() {
  temp.value += 10;
}

function changeHeight() {
  height.value += 10;
}

// 监听
// 用watch实现，需要明确的指出要监视：temp、height
watch([temp, height],(value) => {
  // 从value中获取最新的temp值、height值
  let [newTemp, newHeight] = value;
  // console.log(newTemp, newHeight);

  if (newTemp >= 60 || newHeight >= 80) {
    console.log('watch:给服务器发请求');
  }
})

// 用watchEffect实现，不用
watchEffect(() => {
  if (temp.value >= 60 || height.value >= 80) {
    console.log('watchEffect:给服务器发请求');
  }
})
</script>

<template>
  <div class="person">
    <h2>需求：当水温达到60℃时，或水位达到80cm时，给服务器发请求</h2>
    <h2>当前水温：{{ temp }}℃</h2>
    <h2>当前水位：{{ height }}cm</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px #000;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>
